/**
 * Webpages Product Zoom
 *
 * Stand: 2012-01-30
 * Version: 1.7
 *
 * Changelog:
 * 1.7: Audioplayer Bugfix
 * 1.6: replace von Dateiendungen mit "." von fileextension versehen
 * 1.5: Video-Problem
 * 1.4: Zoom-Bugfixing: Border bei Preview-DIV mit in Berechnung eingebunden
 * 1.3: IE7/8-Bugfixes (opacity 0.01 aplha, #f00 im Block-Div)
 * 1.2: Bugfixes im Zoom-Bereich, Block-Div angelegt
 * 1.1: IE8 Bugfix: background-position in Zoom-Lupe
 * 1.0: Erste finale Version inkl. iPad-Optimierung
 *
 * TODO:
 * userAgent-Erkennung als eigene Methode, Andriod
 *
 * @param configParams
 */
$.fn.productZoom = function(configParams){

    mousePosition = {};

    // Loading-Image vorladen
    cachedLoadingImage = document.createElement('img');
    cachedLoadingImage.src = configParams.loadingImage;

    // Erstes Bild vorladen
    zoomImage = document.createElement('img');
    zoomImage.src = $(configParams.zoomTriggerImage).attr('src').replace(configParams.imageEnd+".", configParams.zoomImageEnd+".");

    /**
     * Bilddaten austauschen mit ueberliefertem Imageobject
     *
     * @param element
     * @param imageobj
     */
    $.fn.changeImageSource = function(element, imageobj) {
        $(element).hide();
        $(element).attr('src', imageobj.src);
        $(element).height(imageobj.height);
        $(element).width(imageobj.width);
        $(element).show();
    }


    /**
     * Laden starten
     *
     * @param appendElement
     * @param htmlString
     */
    $.fn.startLoading = function(appendElement, htmlString){
        $(configParams.zoomTriggerImage).css(configParams.imageZoomCss);
        $(appendElement).append(htmlString);
        $(configParams.loadingAppend).after(configParams.loadingBlocker);
    }


    /**
     * Laden beenden/entfernen
     *
     * @param appendElement
     */
    $.fn.endLoading = function(appendElement){
        $(configParams.zoomTriggerImage).css(configParams.imageDefaultCss);
        $(appendElement+' .'+configParams.loadingClass).remove();
        $(configParams.loadingBlockerClass).remove();
    }


    /**
     * Zoom starten
     */
    $.fn.startZoomAction = function(){

        /**
         * Groesse des Zoom-Divs abaendern
         */
        $.fn.changeZoomSize = function() {

            // Groesse und Position des Preview-Divs errechnen und festlegen
            var multiplicator = $(configParams.parentElement+' .zoomImage img').width()/$(configParams.zoomTriggerImage).width();

            $(configParams.parentElement+' .zoomPreview').css('width', $(configParams.zoomParentElement+' .zoomImage').width()/multiplicator);
            $(configParams.parentElement+' .zoomPreview').css('height', $(configParams.zoomParentElement+' .zoomImage').height()/multiplicator);

            // Schnelle Mausbewegungen aus dem Bild abfangen (div um das Bild mit mouseover zum Ausschalten des Zoom)
            marginTop = $(configParams.zoomTriggerImage).offset().top-$(configParams.zoomTriggerImage).parent().offset().top-1000;
            marginLeft = $(configParams.zoomTriggerImage).offset().left-$(configParams.zoomTriggerImage).parent().offset().left-1000;
            if (navigator.userAgent.match(/iPad/i) == null && navigator.userAgent.match(/iPod/i) == null && navigator.userAgent.match(/iPhone/i) == null) {
                // Div, um Zoom-Out anzusteuern, damit schnelle Mausbewegungen abgefangen werden
                $(configParams.zoomTriggerImage).before('<div id="zoomOutTrigger" style="position: absolute; margin: '+marginTop+'px 0 0 '+(marginLeft+200)+'px; width: '+($(configParams.zoomTriggerImage).width()+1000)+'px; height: '+($(configParams.zoomTriggerImage).height()+2000)+'px;"></div>');
                $(configParams.parentElement+' #zoomOutTrigger, '+configParams.parentElement+' .zoomImage img').mouseover(function(){
                    $.fn.endZoomAction();
                });
            }

            // Mousemove auf das Preview-Fenster binden
            $(configParams.parentElement+' .zoomPreview').mousemove(function(position){
                mousePosition = position;
                if (zoomImage.complete == true) { $.fn.moveZoomAction(); }
            });

        }

        // Image-Objekt bei Bedarf fuellen
        if (zoomImage.src !=  $(configParams.zoomTriggerImage).attr('src').replace(configParams.imageEnd+".", configParams.zoomImageEnd+".")) {
            zoomImage = document.createElement('img');
            zoomImage.src = $(configParams.zoomTriggerImage).attr('src').replace(configParams.imageEnd+".", configParams.zoomImageEnd+".");
        }

        // Zoom-Bild laden (mit Preload)
        if (zoomImage.complete != true) {
            // Loading einblenden, bis das Bild geladen ist
            $.fn.startLoading(configParams.loadingAppend, configParams.loadingString);
            $(zoomImage).load(function() {
                $.fn.insertPreviewDiv();
                $.fn.endLoading(configParams.loadingAppend);
                $(configParams.zoomTriggerImage).css(configParams.imageZoomCss);
                $(configParams.zoomParentElement).append('<div class="zoomImage"><img src="'+$(configParams.zoomTriggerImage).attr('src').replace(configParams.imageEnd+".", configParams.zoomImageEnd+".")+'" alt="'+$(configParams.zoomTriggerImage).attr('alt')+'" /></div><div class="zoomImageFix"></div>');
                $.fn.changeImageSource(configParams.zoomParentElement+' .zoomImage img', zoomImage);
                $.fn.changeZoomSize();
                // Initlialisieren des optionalen Lightbox-Plug-Ins
                if (configParams.imageGallery == 1) {
                    $.fn.startLightbox();
                }
            });
        } else {
            $(configParams.zoomTriggerImage).css(configParams.imageZoomCss);
            $.fn.insertPreviewDiv();
            $(configParams.zoomParentElement).append('<div class="zoomImage"><img src="'+$(configParams.zoomTriggerImage).attr('src').replace(configParams.imageEnd+".", configParams.zoomImageEnd+".")+'" alt="'+$(configParams.zoomTriggerImage).attr('alt')+'" /></div><div class="zoomImageFix"></div>');
            $.fn.changeImageSource(configParams.zoomParentElement+' .zoomImage img', zoomImage);
            $.fn.changeZoomSize();
            // Initlialisieren des optionalen Lightbox-Plug-Ins
            if (configParams.imageGallery == 1) {
                $.fn.startLightbox();
            }
        }

    }


    /**
     * Preview-Div mit auf normalem Bild
     */
    $.fn.insertPreviewDiv = function(){
        $(configParams.zoomTriggerImage).after('<div class="zoomPreview"></div>');
        if (configParams.zoomImageOuterSwitch == 1) {
            $(configParams.parentElement+' .zoomPreview').css({'opacity': 1, 'background-image': 'url('+$(configParams.zoomTriggerImage).attr('src')+')'});
        }
        $.fn.moveZoomAction();
    }


    /**
     * Zoom beenden
     */
    $.fn.endZoomAction = function(){
        // Mouseover auf Loading-Gif abfangen
        $(' .zoomImage').remove();
        $(' .zoomImageFix').remove();
        $(' .zoomPreview').remove();
        $.fn.endLoading(configParams.loadingAppend);
        if (navigator.userAgent.match(/iPad/i) == null && navigator.userAgent.match(/iPod/i) == null && navigator.userAgent.match(/iPhone/i) == null) {
            $(configParams.zoomTriggerImage).prev().remove();
        }
    }


    /**
     * Zoom bewegen
     *
     * @param position
     */
    $.fn.moveZoomAction = function(){
        if ($('.zoomPreview').length > 0) {

            // Multiplikator berechnen
            var multiplicator = $('.zoomImage img').width()/$(configParams.zoomTriggerImage).width();

            // Mausposition im Bild errechnen
            var imagePosition = $(configParams.zoomTriggerImage).offset();
            var imageMousepositionX = mousePosition.pageX-imagePosition.left;
            var imageMousepositionY = mousePosition.pageY-imagePosition.top;

            // Preview-Ansicht anhand von Mausposition errechnen
            var imageOffsetTop = $(configParams.zoomTriggerImage).offset().top-$(configParams.zoomTriggerImage).parent().offset().top+imageMousepositionY-($('.zoomPreview').height()/2);
            var imageOffsetLeft = $(configParams.zoomTriggerImage).offset().left-$(configParams.zoomTriggerImage).parent().offset().left+imageMousepositionX-($('.zoomPreview').width()/2);

            // Ausnahmeregeln fuer Randgebiete der Preview-Ansicht
            var imageOffsetTopDefault = $(configParams.zoomTriggerImage).offset().top-$(configParams.zoomTriggerImage).parent().offset().top;
            var imageOffsetLeftDefault = $(configParams.zoomTriggerImage).offset().left-$(configParams.zoomTriggerImage).parent().offset().left;
            var imageBorderRight = imageOffsetLeftDefault+$(configParams.zoomTriggerImage).width()-(parseInt($('.zoomPreview').width()+(parseInt($('.zoomPreview').css('border-left-width').replace(/px/, ''))))+(parseInt($('.zoomPreview').css('border-right-width').replace(/px/, ''))));
            var imageBorderBottom = imageOffsetTopDefault+$(configParams.zoomTriggerImage).height()-(parseInt($('.zoomPreview').height()+(parseInt($('.zoomPreview').css('border-bottom-width').replace(/px/, ''))))+(parseInt($('.zoomPreview').css('border-top-width').replace(/px/, ''))));
            if (imageOffsetTop < imageOffsetTopDefault) { imageOffsetTop = imageOffsetTopDefault; }
            if (imageOffsetLeft < imageOffsetLeftDefault) { imageOffsetLeft = imageOffsetLeftDefault; }
            if (imageOffsetLeft > imageBorderRight) { imageOffsetLeft = imageBorderRight; borderRight = 1; } else { borderRight = 0; }
            if (imageOffsetTop > imageBorderBottom) { imageOffsetTop = imageBorderBottom; borderBottom = 1; } else { borderBottom = 0; }

            // Preview-Box verschieben
            $('.zoomPreview').css('top', imageOffsetTop+'px');
            $('.zoomPreview').css('left', imageOffsetLeft+'px');
            
            // Preview-Box: Hintergrund verschieben, wenn der Effekt aktiviert ist
            if (configParams.zoomImageOuterSwitch == 1) {
                $('.zoomPreview').css('background-position', '-'+(imageOffsetLeft-imageOffsetLeftDefault+parseInt($('.zoomPreview').css('border-left-width').replace(/px/, '')))+'px -'+(imageOffsetTop-imageOffsetTopDefault+parseInt($('.zoomPreview').css('border-top-width').replace(/px/, '')))+'px');
            }

            // Border zur Berechnung des Zoom-Bilds wieder abziehen
            if (borderRight == 1) {
                imageOffsetLeft = imageOffsetLeft+(parseInt($('.zoomPreview').css('border-left-width').replace(/px/, '')))+(parseInt($('.zoomPreview').css('border-right-width').replace(/px/, '')));
            }
            if (borderBottom == 1) {
                imageOffsetTop = imageOffsetTop+(parseInt($('.zoomPreview').css('border-top-width').replace(/px/, '')))+(parseInt($('.zoomPreview').css('border-bottom-width').replace(/px/, '')))
            }

            // Zoom-Bild verschieben
            $(configParams.parentElement+' .zoomImage img').css('margin-top', '-'+(imageOffsetTop-imageOffsetTopDefault)*multiplicator+'px');
            $(configParams.parentElement+' .zoomImage img').css('margin-left', '-'+(imageOffsetLeft-imageOffsetLeftDefault)*multiplicator+'px');

            if ($('.zoomPreview').css('display') == "none") { $('.zoomPreview').css('display', 'block'); }
        }
    }


    /**
     * Touch Events (iOS): Position speichern
     */
    $.fn.setIosTouchInfos = function(touchevents, move) {
        touchevents.preventDefault();
        var touch = touchevents.originalEvent.touches[0] || touchevents.originalEvent.changedTouches[0];
        var elmements = $(configParams.zoomTriggerImage).offset(); var x = touch.pageX - elmements.left; var y = touch.pageY - elmements.top;
        mousePosition = touch;
        if(x < $(configParams.zoomTriggerImage).width() && x > 0){ if(y < $(configParams.zoomTriggerImage).height() && y > 0){
            if (move == 1) { $.fn.moveZoomAction(); } } else { $.fn.endZoomAction();} } else { $.fn.endZoomAction();
        }
    }


    // Zoom-Steuerung
    // TODO userAgent-Steuerung als gesonderte Methode - Andriod mit aufnehmen
    if (navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/iPhone/i)) {
        // iOS - Touch Events
        $(configParams.zoomTriggerImage).bind('touchstart', function(touchevents){ $.fn.setIosTouchInfos(touchevents, 0); $.fn.startZoomAction(); });
        $(configParams.zoomTriggerImage).bind('touchend', function(touchevents){ $.fn.setIosTouchInfos(touchevents, 0); $.fn.endZoomAction(); });
        $(configParams.zoomTriggerImage).bind('touchmove', function(touchevents){ $.fn.setIosTouchInfos(touchevents, 1); });
    } else {
        // normale Events
        $(configParams.zoomTriggerImage).mouseenter(function(position){
            mousePosition = position;
            $.fn.startZoomAction();
            $.fn.moveZoomAction();
        }).mouseleave(function(){
            $(configParams.parentElement+' .zoomPreview').mouseleave(function(){ $.fn.endZoomAction(); });
            if (zoomImage.complete != true) { $(configParams.loadingBlockerClass).mouseleave(function(){ $.fn.endZoomAction(); }); }
        }).mousemove(function(position){
            mousePosition = position; if (zoomImage.complete == true) { $.fn.moveZoomAction(); }
        });
    }

};

$(document).ready(function(){

    if ($('#prevpic').length > 0) {
        $('#main').productZoom({
            'parentElement':        '#main',                                        // Elternelement der Zoom-Galerie
            'imageEnd':             '430',                                          // Dateiende (nicht Dateiendung) des normalen Bilds
            'zoomImageEnd':         '1600',                                         // Dateiende (nicht Dateiendung) des Zoombilds
            'effectSpeed':          200,                                            // Effekt-Geschwindigkeit fuer Animationen (ms)
            'loadingAppend':        '#detailImageLarge',                            // Bild-Element (normale Groesse); Trigger fuer Zoom
            'zoomTriggerImage':     '#prevpic .zoomTrigger',                        // Bild-Element (normale Groesse); Trigger fuer Zoom
            'zoomParentElement':    '#col2_content',                                // DOM-Element, in dem der Zoom integriert wird (<div class="zoomImage"> wird per append hinzugefuegt)
            'imageDefaultCss':      {'background': '', 'opacity': '1' },            // default-Eigenschaften fuer normales Bild
            'imageZoomCss':         {'background': '#ffffff', 'opacity': '0.3'},    // Eigenschaften fuer normales Bild bei Mouseover (Zoom-Box)
            'zoomImageOuterSwitch': 1,                                              // Aufhellen des Zoom-Feld auf Bild (im Fall: Bild wird aufgehellt, Zoom-Box des Mauszeigers zeigt das Orginalbild) - 1/0
            'loadingImage':         'img/ce/ajax-loader.gif',                       // Loading-Gif
            'loadingString':        '<div class="ajaxloader"><img src="img/ce/ajax-loader.gif" alt="loading" width="32" height="32" /></div>', // Loading string
            'loadingBlocker':       '<div id="loadingblock" style="height:430px;padding-right:1px;position:absolute;width:384px;-zindex:10001;background:#f00;opacity:0.01;filter:alpha(opacity=1);"></div>', // Loading Block, damit der Zoom nicht zu frueh ausgefuehrt wird
            'loadingBlockerClass':  '#loadingblock',                                // Klasse oder ID zum Entfernen des Blockstrings
            'loadingClass':         'ajaxloader',                                   // Loading Class
            'imageGallery':         0                                               // Click-Funktionalitaet auf normales Image (Lightbox-Galerie, Plug-In notwendig!)
        });
    }
});
